<template>
	<n-form ref="formRef" :model="formData" :label-width="80" :rules="rules"  label-placement="left">
    <n-form-item label="字典名称" path="name">
        <n-input v-model:value="formData.name" clearable placeholder="请输入字典名称" />
    </n-form-item>
     <n-form-item label="字典类型" path="type">
        <n-input v-model:value="formData.type" clearable placeholder="请输入字典类型" />
    </n-form-item>

	</n-form>
	<n-space justify="center">
		<n-button @click="handleSubmitForm">确定</n-button>
		<n-button @click="handleCloseModal">取消</n-button>
	</n-space>
</template>

<script  setup lang='ts' >
import { FormInst } from 'naive-ui';
import { ref, toRefs } from 'vue';
import { fetchAddType, fetchUpdateType } from '@/service/api/sys/dict/type'
import { SysDictType } from "./index"
import { FlatResponseData } from '~/packages/axios/src/type';


interface DataSource extends SysDictType { }
type Props = {
	formData: DataSource
}
const props = defineProps<Props>()
const formRef = ref<FormInst | null>(null)
const { formData } = toRefs(props)
const rules = {
	name:{
		required:true,
		message:"请输入字典名称",
		trigger:'blur'

	},
	code:{
		required:true,
		message:"请输入字典类型",
		trigger:'blur'

	},
}

const emit = defineEmits(["list", "close"])

function handleCloseModal() {
	emit("close")
}
function handleFetchResult(res: FlatResponseData<any, App.Service.Response<unknown>>) {
    if (!res.error) {
        handleCloseModal()
        emit("list")
    }
}
function handleSubmitForm() {
	formRef.value?.validate(e => {
		if (!e) {
			const value = formData.value
			if (value.id) {
				fetchUpdateType(formData.value).then(handleFetchResult)
			} else {
				fetchAddType(formData.value).then(handleFetchResult)
			}
		}
	})
}

</script>

<style lang='scss' scoped>
</style>
